<template>
  <el-container class="backend_box">
    <el-header>
      <my-header @edit="onWrite"></my-header>
    </el-header>
    <el-container>
      <el-aside width="250px">
        <my-aside></my-aside>
      </el-aside>
      <el-container class="center">
        <el-main>
          <router-view></router-view>
        </el-main>
        <el-footer>欢迎来到后台管理系统</el-footer>
      </el-container>
    </el-container>
    <!-- 文章编辑 -->
    <editor class="box-card" @exit="exit" v-show="isShow"></editor>
  </el-container>
</template>
<script>
import MyAside from './Aside'
import MyHeader from './Header'
import Editor from '../../components/editor/editor'

import { mapGetters } from 'vuex'
export default {
  data() {
    return {
      isShow: false
    }
  },
  components: {
    MyAside,
    MyHeader,
    Editor
  },
  created() {
    if (!this.getIsLogin || !this.getUser.isAdmin) {
      this.$router.push('/')
    }
    this.$EventBus.$on('edit', () => {
      this.isShow = true
    })
  },
  computed: {
    ...mapGetters(['getIsLogin', 'getUser']),
    mount: function () {
      return this.$store.getters.getReadMount
    }
  },
  methods: {
    // 写博客
    onWrite() {
      this.isShow = true
    },
    // 关闭编辑器
    exit() {
      this.isShow = false
    }
  }
}
</script>
<style lang="scss" scoped>
@import './backend.scss';
.backend_box {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 100;
  height: 100%;
  width: 100%;
  overflow: hidden;
  min-width: 1200px;
}
.el-header {
  background-color: rgb(236, 236, 236);
  color: rgb(255, 255, 255);
  padding: 0px;
}
.el-footer {
  background-color: rgb(236, 236, 236);
  color: rgb(255, 255, 255);
  text-align: center;
  line-height: 60px;
}

.el-aside {
  background-color: $backend_primary;
}

.center {
  height: calc(100vh - 60px);
}

.el-main {
  background: rgb(255, 255, 255);
  color: #333;
  height: calc(100% - 60px) !important;
  overflow: hidden;
  padding: 0px !important;
}

body > .el-container {
  margin-bottom: 40px;
}
</style>
